<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="dav">
        <ul id="uli">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
        </ul>
    </div>
</body>
<script src="./jquery-3.7.1.min.js"></script>
<script>
    // append（）在目标元素后面插内容
    // prepend（） 目标元素开头插内容
    // after（） 之后
    // before（）之前
    let uli = $("#uli");
    uli.append('<li>wwww</li>');
    uli.prepend('<li style="color:red;">222222</li>')
    let dav = $("#dav");
    dav.after("<p>111</p>");
    dav.before("<h1>1111</h1>");
    let tex = $("<p></p>").text("sssss");
    dav.after(tex);
</script>

</html>